import streamlit as st
from utils.image import get_base64_image

# 设置页面配置
st.set_page_config(
    page_title="TestCaseGPT",
    page_icon="assets/header-logo.png",
    layout="wide",
    initial_sidebar_state="collapsed"
)

# 自定义CSS样式
st.markdown("""
<style>
    /* 移除 Streamlit 默认的上边距 */
    .block-container {
        padding-top: 1rem !important;
        padding-bottom: 0rem !important;
    }

    /* 调整主容器样式 */
    .main {
        padding: 0.5rem;
        max-width: 1000px;
        margin: 0 auto;
        min-height: calc(100vh - 1rem);  /* 减小最小高度 */
        display: flex;
        flex-direction: column;
    }

    /* 调整标题区域 */
    .title-container {
        display: flex;
        flex-direction: column;  /* 整体垂直排列 */
        align-items: center;     /* 水平居中 */
        gap: 5px;               /* 行间距 */
        padding: 1rem 0;
        margin-bottom: 1.5rem;
    }
    
    /* 添加标题行容器 */
    .title-row {
        display: flex;          /* 水平排列 */
        align-items: center;    /* 垂直居中对齐 */
        gap: 10px;             /* 图标和标题间距 */
    }

    .title-icon {
        width: 100px;          /* 固定宽度 */
        height: auto;          /* 高度自动调整 */
        object-fit: contain;   /* 保持长宽比 */
    }

    .title-container h1 {
        font-size: 2rem;
        color: #2c3e50;
        margin: 0;
    }

    .title-container p {
        font-size: 1rem;
        color: #666;
        margin: 0;
    }

    .feature-container {
        padding: 1.5rem;
        border-radius: 8px;
        background-color: white;
        margin-bottom: 1rem;
        border: 1px solid #eee;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }
    .feature-container:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }
    .feature-title {
        font-size: 1.2rem;
        color: #2c3e50;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    .feature-description {
        color: #666;
    }
    .feature-description p {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }
    .feature-description ul {
        margin-left: 1.2rem;
    }
    .feature-description li {
        margin-bottom: 0.4rem;
        color: #555;
        font-size: 0.9rem;
    }
    footer {
        margin-top: auto;  /* 将页脚推到底部 */
        padding: 3rem 0 0.3rem 0;  /* 增加顶部内边距，减小底部内边距 */
        border-top: 1px solid #eee;
    }
    footer p {
        font-size: 0.8rem !important;  /* 进一步减小字体大小 */
        color: #999;  /* 使用更浅的颜色 */
        margin-bottom: 0;
        opacity: 0.8;  /* 添加透明度 */
    }

    /* 调整滚动条样式 */
    ::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
    }
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 0.25rem;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #666;
    }

    /* 确保内容区域有足够的下边距 */
    .stButton {
        margin-bottom: 2rem;  /* 增加按钮下方的间距 */
    }
</style>
""", unsafe_allow_html=True)

# 标题区域
st.markdown("""
<div class="title-container">
    <div class="title-row">
        <img src="data:image/png;base64,{}" class="title-icon">
        <h1>TestCaseGPT</h1>
    </div>
    <p>智能化测试用例生成与优化平台</p>
</div>streamlit run
""".format(get_base64_image("../assets/6cloudlogo.png")), unsafe_allow_html=True)

# 功能区域
col1, col2 = st.columns(2)

with col1:
    st.markdown("""
    <div class="feature-container">
        <h3 class="feature-title">📝 测试用例生成</h3>
        <div class="feature-description">
            <p>从需求文档自动生成测试用例：</p>
            <ul>
                <li>支持多种文档格式</li>
                <li>智能分析需求要点</li>
                <li>自动生成测试用例</li>
                <li>导出标准Excel格式</li>
            </ul>
        </div>
    </div>
    """, unsafe_allow_html=True)
    if st.button("进入用例生成", use_container_width=True):
        st.switch_page("pages/01_用例生成.py")

with col2:
    st.markdown("""
    <div class="feature-container">
        <h3 class="feature-title">🔄 测试用例优化</h3>
        <div class="feature-description">
            <p>优化已有的测试用例：</p>
            <ul>
                <li>上传已有用例</li>
                <li>智能检查和优化</li>
                <li>规范用例格式</li>
                <li>导出优化结果</li>
            </ul>
        </div>
    </div>
    """, unsafe_allow_html=True)
    if st.button("进入用例优化", use_container_width=True):
        st.switch_page("pages/02_用例优化.py")

# 底部信息
st.markdown("""
<footer style="text-align: center;">
    <p>©2025 </p>
</footer>
""", unsafe_allow_html=True) 